<template>
	<view>
		<view class="top_text">文源办公用品配送中心</view>
		<view class="serch-border">
			<input placeholder=" 推荐 宝贝 新品" style="display: inline-block;width: 240px;" v-model="search"
				@input="onInput" @focus="showValue" @blur="loseFocus"/>
			<icon type="search" size="26" class="search-icon" @click="biu(0)" />
		</view>
		<view class="InputList" v-if="isFocus&& search_list.length">
			<view v-for="item in search_list" :key="item.goodsid" @click="setSearch(item.goodsname)" class="listSon">
				{{item.goodsname}}
			</view>
		</view>
		<view class="buttom">
			<view @click="addToCart()">
				<view>购物车</view>
			</view>
		</view>
		<view>
			<view style="margin-top: 25px;">
				<uni-list>
					<uni-list-item>
						<template slot="footer" @click="biu(1)">
							<uni-icons type="arrowright" color="#8F8F94"></uni-icons>
						</template>
						<template slot="header">
							<view class="text">书写工具</view>
							<image src="../../../static/pen.png" class="img"></image>
						</template>
					</uni-list-item>
				</uni-list>
				<view v-for="(item,key) in goods" :key="key">
					<uni-list v-show="item['goodscategory']==='书写工具'">
						<uni-list-item :thumb="item['goodspicture']" thumbSize="base">
							<template slot="body" class="temp" @tap="getClicked(item['goodsid'])">
								<text class="temp_text1">名称：{{item['goodsname']}}</text>
								<text class="temp_text2">价格：￥{{item['goodsprice']}}</text>
								<!-- <text class="temp_text3">库存：{{item['goodsstock']}}</text> -->
								<text class="temp_text4">规格：{{item['goodsstandard']}}</text>
							</template>
							<template slot="footer" class="add">
								<view v-if="item['purchasenum']===0" @click="change_purchasenum(key,1)">
									<view>+</view>
									<!-- <view  :animation="animationData" style="background:red;height:10px;width:10px;border-radius: 5px;"></view> -->
								</view>
								<view v-else class="add_box">
									<view @click="change_purchasenum(key,-1)" class="oprator">-</view>
									<!-- {{item['purchasenum']}} -->
									<input :value="goods[key]['purchasenum']" class="input-my"
										@input="inputChange($event,key)" />
									<view @click="change_purchasenum(key,1)" class="oprator">+</view>
								</view>
							</template>
						</uni-list-item>
					</uni-list>
				</view>
			</view>
			<view>
				<uni-list>
					<uni-list-item>
						<template slot="footer" @click="biu(2)">
							<uni-icons type="arrowright" color="#8F8F94"></uni-icons>
						</template>
						<template slot="header">
							<view class="text">纸张本册</view>
							<image src="../../../static/book.png" class="img"></image>
						</template>
					</uni-list-item>
				</uni-list>
				<view v-for="(item,key) in goods" :key="key">
					<uni-list v-show="item['goodscategory']==='纸张本册'">
						<uni-list-item :thumb="item['goodspicture']" thumbSize="base">
							<template slot="body" class="temp" @tap="getClicked(item['goodsid'])">
								<text class="temp_text1">名称：{{item['goodsname']}}</text>
								<text class="temp_text2">价格：￥{{item['goodsprice']}}</text>
								<!-- <text class="temp_text3">库存：{{item['goodsstock']}}</text> -->
								<text class="temp_text4">规格：{{item['goodsstandard']}}</text>
							</template>
							<template slot="footer" class="add">
								<view v-if="item['purchasenum']===0" @click="change_purchasenum(key,1)">+</view>
								<view v-else class="add_box">
									<view @click="change_purchasenum(key,-1)" class="oprator">-</view>
									<!-- {{item['purchasenum']}} -->
									<input :value="goods[key]['purchasenum']" class="input-my"
										@input="inputChange($event,key)" />
									<view @click="change_purchasenum(key,1)" class="oprator">+</view>
								</view>
							</template>
						</uni-list-item>
					</uni-list>
				</view>
			</view>
			<view>
				<uni-list>
					<uni-list-item>
						<template slot="footer" @click="biu(3)">
							<uni-icons type="arrowright" color="#8F8F94"></uni-icons>
						</template>
						<template slot="header">
							<view class="text">学习用品</view>
							<image src="../../../static/ruler.png" class="img"></image>
						</template>
					</uni-list-item>
				</uni-list>
				<view v-for="(item,key) in goods" :key="key">
					<uni-list v-show="item['goodscategory']==='学习用品'">
						<uni-list-item :thumb="item['goodspicture']" thumbSize="base">
							<template slot="body" class="temp" @tap="getClicked(item['goodsid'])">
								<text class="temp_text1">名称：{{item['goodsname']}}</text>
								<text class="temp_text2">价格：￥{{item['goodsprice']}}</text>
								<!-- <text class="temp_text3">库存：{{item['goodsstock']}}</text> -->
								<text class="temp_text4">规格：{{item['goodsstandard']}}</text>
							</template>
							<template slot="footer" class="add">
								<view v-if="item['purchasenum']===0" @click="change_purchasenum(key,1)">+</view>
								<view v-else class="add_box">
									<view @click="change_purchasenum(key,-1)" class="oprator">-</view>
									<!-- {{item['purchasenum']}} -->
									<input :value="goods[key]['purchasenum']" class="input-my"
										@input="inputChange($event,key)" />
									<view @click="change_purchasenum(key,1)" class="oprator">+</view>
								</view>
							</template>
						</uni-list-item>
					</uni-list>
				</view>
			</view>
			<view>
				<view>
					<uni-list>
						<uni-list-item>
							<template slot="footer" @click="biu(4)">
								<uni-icons type="arrowright" color="#8F8F94"></uni-icons>
							</template>
							<template slot="header">
								<view class="text">收纳整理</view>
								<image src="../../../static/收纳盒.png" class="img"></image>
							</template>
						</uni-list-item>
					</uni-list>
				</view>
				<view v-for="(item,key) in goods" :key="key">
					<uni-list v-show="item['goodscategory']==='收纳整理'">
						<uni-list-item :thumb="item['goodspicture']" thumbSize="base">
							<template slot="body" class="temp" @tap="getClicked(item['goodsid'])">
								<text class="temp_text1">名称：{{item['goodsname']}}</text>
								<text class="temp_text2">价格：￥{{item['goodsprice']}}</text>
								<!-- <text class="temp_text3">库存：{{item['goodsstock']}}</text> -->
								<text class="temp_text4">规格：{{item['goodsstandard']}}</text>
							</template>
							<template slot="footer" class="add">
								<view v-if="item['purchasenum']===0" @click="change_purchasenum(key,1)">+</view>
								<view v-else class="add_box">
									<view @click="change_purchasenum(key,-1)" class="oprator">-</view>
									<!-- {{item['purchasenum']}} -->
									<input :value="goods[key]['purchasenum']" class="input-my"
										@input="inputChange($event,key)" />
									<view @click="change_purchasenum(key,1)" class="oprator">+</view>
								</view>
							</template>
						</uni-list-item>
					</uni-list>
				</view>
			</view>
			<view>
				<uni-list>
					<uni-list-item>
						<template slot="footer" @click="biu(5)">
							<uni-icons type="arrowright" color="#8F8F94"></uni-icons>
						</template>
						<template slot="header">
							<view class="text">办公用品</view>
							<image src="../../../static/pen.png" class="img"></image>
						</template>
					</uni-list-item>
				</uni-list>
				<view v-for="(item,key) in goods" :key="key">
					<uni-list v-show="item['goodscategory']==='办公用品'">
						<uni-list-item :thumb="item['goodspicture']" thumbSize="base">
							<template slot="body" class="temp" @tap="getClicked(item['goodsid'])">
								<text class="temp_text1">名称：{{item['goodsname']}}</text>
								<text class="temp_text2">价格：￥{{item['goodsprice']}}</text>
								<!-- <text class="temp_text3">库存：{{item['goodsstock']}}</text> -->
								<text class="temp_text4">规格：{{item['goodsstandard']}}</text>
							</template>
							<template slot="footer" class="add">
								<view v-if="item['purchasenum']===0" @click="change_purchasenum(key,1)">+</view>
								<view v-else class="add_box">
									<view @click="change_purchasenum(key,-1)" class="oprator">-</view>
									<!-- {{item['purchasenum']}} -->
									<input :value="goods[key]['purchasenum']" class="input-my"
										@input="inputChange($event,key)" />
									<view @click="change_purchasenum(key,1)" class="oprator">+</view>
								</view>
							</template>
						</uni-list-item>
					</uni-list>
				</view>
			</view>
		</view>
		<view style="height: 80px;"> </view>
	</view>
</template>

<script>
	import Vue from "vue";
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				goods: [{

				}],
				search: '',
				purchase_num: 0,
				isShow: false,
				src: "../../../../../static/default_goods.png",
				cart_list: [],
				value: '',
				isFocus: false,
				search_list: []
			}
		},
		computed: mapState(['hasLogin', 'userName', 'userType', 'purchaseNumberList']),
		// onLoad() {
		// 	this.$myRequest({
		// 		url: '/users/search_info/',
		// 		data: {
		// 			'key': ''
		// 		}
		// 	}).then(res => {
		// 		if (res.statusCode === 200) {
		// 			this.goods_list = res.data;
		// 		}
		// 	});
		// },
		methods: {
			...mapMutations(['changeCart']),
			...mapMutations(['show']),
			biu(choice) {
				let name = 'category';
				switch (choice) {
					case 0:
						name = 'search'
						break;
					case 1:
						this.search = '书写工具';
						break;
					case 2:
						this.search = '纸张本册';
					case 3:
						this.search = '学习用品';
						break;
					case 4:
						this.search = '收纳整理';
						break;
					case 5:
						this.search = '办公用品';
						break;
					default:
						break;
				}
				for (let index = 0; index < this.goods.length; index++) {
					if (this.goods[index]['purchasenum'] > 0) {
						this.cart_list.push(this.goods[index])
					}
				}
				uni.navigateTo({
					url: '/pages/tabBar/main/search/search?search=' + this.search + '&name=' + name,
					events: {
						emptyKeyWord: (data) => {
							this.search = '';
						},
						syncCartList: (data) => {
							if (data.cart_list.length != 0) {
								this.cart_list = data.cart_list;
								console.log(this.cart_list);
								for (var i = 0; i < this.cart_list.length; i++) {
									console.log(this.cart_list[i]['goodsid']);
									console.log(this.goods)
									for (var j = 0; j < this.goods.length; j++) {
										console.log(this.goods[j]['goodsid']);
										if (this.cart_list[i]['goodsid'] === this.goods[j][
												'goodsid'
											]) {
											console.log('true');
											this.$set(this.goods[j], 'purchasenum', this.cart_list[
												i]['purchasenum']);
											break;
										}
									}
								}
								this.cart_list = [];
							} else {
								console.log('啥情况');
								for (var j = 0; j < this.goods.length; j++) {
									this.$set(this.goods[j], 'purchasenum', 0);
								}

							}
						}
					},
					success: (res) => {
						res.eventChannel.emit('syncPurchaseNum', {
							cart_list: this.cart_list
						});
						this.cart_list = [];
					}
				})
			},
			getClicked(id) {
				console.log(id);
				uni.navigateTo({
					url: '/pages/tabBar/main/cusCertainGoods/cusCertainGoods',
					success: (response) => {
						console.log(response);
						response.eventChannel.emit('gerGoodsInfo', {
							goodsid: id
						})
					}
				})
			},
			inputChange(e, key) {
				// console.log(e);
				if (Number(e.detail.value) > this.goods[key]['goodsstock']) {
					uni.showToast({
						title: '太多啦',
						icon: 'none'
					});
					this.goods[key]['purchasenum'] = 0;
				} else if (Number(e.detail.value) == 0) {
					this.goods[key]['purchasenum'] = 0;
				} else {
					this.goods[key]['purchasenum'] = Number(e.detail.value);
				}
				this.changeCart(this.goods[key])
				this.show()
			},
			change_purchasenum(key, num) {
				this.goods[key]['purchasenum'] = Number(this.goods[key]['purchasenum'])
				if (this.goods[key]['purchasenum'] < this.goods[key]['goodsstock']) {
					this.goods[key]['purchasenum'] += num
				} else if (this.goods[key]['purchasenum'] == this.goods[key]['goodsstock']) {
					if (num == 1) {
						uni.showToast({
							title: '不能再多啦',
							icon: 'none'
						});
					} else if (num == -1) {
						this.goods[key]['purchasenum'] += num;
					}
				}
				this.changeCart(this.goods[key])
				this.show()
			},
			addToCart() {
				for (let index = 0; index < this.goods.length; index++) {
					if (this.goods[index]['purchasenum'] > 0) {
						this.cart_list.push(this.goods[index])
					}
				}
				uni.navigateTo({
					url: '/pages/cart/cart?cartlist=' + encodeURIComponent(JSON.stringify(this.cart_list)),
					events: {
						// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
						emptyShoppingCart: (data) => {
							for (var index = 0; index < this.goods.length; index++) {
								this.goods[index]['purchasenum'] = 0;
							}
							console.log(this.goods)
						}
					},
					success: (res) => {
						console.log(res)
						this.cart_list = []
					}
				})
			},

			onInput(e) {
				let value = e.detail.value;
				this.value = value;
				this.getList();
			},
			showValue() {
				this.isFocus = true;
				if (this.isValue) { //如果获取到了焦点
					this.getList()
				} else {
					//失去焦点  清空数据
				}
			},
			getList(){
				this.$myRequest({
					url: '/users/search_info/',
					data: {
						'key': this.value
					}
				}).then(res => {
					if (res.statusCode === 200) {
						this.search_list=res.data;
					}
				});
			},
			setSearch(value) {
				this.search = value;
				this.value='';
				this.search_list=[];
				this.isFocus=false;
				this.biu(0);
			},
			loseFocus(){
				this.isFocus=false;
			}
		},
		beforeCreate() {
			const res = this.$myRequest({
				url: '/users/get_goodsinfo/',
				data: {
					"categories": ["学习用品", "纸张本册", "书写工具", "收纳整理", "办公用品"]
				}
			}).then(response => {
				console.log(response);
				this.goods = response.data
				for (let index = 0; index < this.goods.length; index++) {
					this.$set(this.goods[index], 'purchasenum', 0);
					// this.$set(this.goods[index], 'isShow', false);
				}
				let index;
				for (index = 0; index < response.data.length; index++) {
					let item = response.data[index]
					const picts = this.$myRequest({
						url: '/product/get_pict_url/',
						data: {
							"id": item['goodsid']
						}
					}).then((res) => {
						if (res.data.length == 0) {
							item.goodspicture = this.src;
						} else {
							item.goodspicture = res.data[0];
						}
					})
				}
				console.log(this.goods);
			}).catch((error) => {
				console.log(error);
			})
		},
		mounted() {
			console.log(this.purchaseNumberList)
			if (this.purchaseNumberList.length != 0) {
				for (var i = 0; i < this.purchaseNumberList.length; i++) {
					for (var j = 0; j < this.goods.length; j++) {
						if (this.goods[j]['goodsid'] === this.purchaseNumberList[i].goodsid) {
							this.$set(this.goods[j], 'purchasenum', this.purchaseNumberList[i].purchasenum)
						}
					}
				}
			}
		}
	}
</script>

<style lang="scss">
	.top_text {
		font-size: 25px;
		line-height: 25px;
		margin-left: 15px;
		margin-top: 10px;
	}

	.text {
		display: inline-block;
		margin-right: 15px;
	}

	.img {
		width: 25px;
		height: 25px;
	}

	.serch-border {
		margin-top: 50px;
		height: 20px;
		width: 275px;
		margin-right: 50px;
		margin-left: 50px;
		position: relative;

		.search {
			display: inline;
			margin-left: 5px;
			margin-right: 5px;
		}

		.search-icon {
			display: inline-block;
			width: 26px;
			height: 26px;
			position: absolute;
			right: 0;
		}
	}

	.zhanwei {
		height: 50px;
		background-color: white;
	}

	.temp {
		.temp_text1 {
			width: 100px;
			margin-right: 10px;
			display: inline-block;
		}

		.temp_text2 {
			width: 100px;
			margin-right: 10px;
			display: inline-block;

		}

		.temp_text3 {
			width: 100px;
			margin-right: 10px;
			display: inline-block;
		}

		.temp_text4 {
			color: #8F8F94;
			width: 250px;
			margin-right: 10px;
			display: inline-block;
			// overflow: hidden；
			// white-space: nowrap；
			// text-overflow: ellipsis；
			overflow: hidden;
			-webkit-line-clamp: 1;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
		}
	}

	.buttom {
		position: fixed;
		bottom: 50px;
		z-index: 99;
		height: 30px;
		width: 100%;
		text-align: center;
		background: green;
	}

	.add {
		width: 50px;
		position: relative;

		.add_box {
			position: absolute;
			right: 0;
			display: flex;

			.input-my {
				display: inline-block;
				width: 20px;
				border: 1px #8F8F94 solid;
			}

			.oprator {
				width: 20px;
				height: 1.4rem;
				border: 1px #8F8F94 solid;
			}
		}
	}
</style>
<style lang="scss">
	$max:100%;

	.box {
		width: $max;
		padding: 10 30rpx; //上下10 左右30  
		height: 64rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		min-height: 32px;
		position: relative;
		background: #409EFF;

		.S-input {
			width: 660rpx;
			background: #f7f7f7;
			padding-left: 30rpx;
			border-radius: 32rpx;
		}

		.InputList {
			position: absolute;
			width: 690rpx;
			height: auto;
			min-height: 100rpx;
			top: 74rpx;
			border: 1rpx solid #409EFF;
			border-radius: 5rpx;
			padding: 10rpx;

			.listSon {
				height: 50rpx;
				line-height: 50rpx;
				font-size: 32rpx;
				text-indent: 1em;
			}

			.listSon:nth-of-type(even) {
				background: #f7f7f7;
			}
		}
	}
</style>
